<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transform: rotate3d(1,1,0,-30deg);
			transform-style: preserve-3d;
		}
		.box div{
			position: absolute;
			opacity: 0.5;
			/*transform: translate3d(1,1,0,-30deg);*/
		}
		.top{
			width: 200px;
			height: 200px;
			background: red;
			transform: translateY(-100px) rotate3d(1,0,0,90deg);
		}
		.bottom{
			width: 200px;
			height: 200px;
			background: green;
			transform: translateY(100px) rotate3d(1,0,0,90deg);
		}
		.left{
			width: 200px;
			height: 200px;
			background: blue;
			transform: translateX(-100px) rotate3d(0,1,0,-90deg);
		}
		.right{
			width: 200px;
			height: 200px;
			background:  yellow;
			transform: translateX(100px) rotate3d(0,1,0,90deg);
		}
		.qian{
			width: 200px;
			height: 200px;
			background: pink;
			transform: translateZ(100px);
		}
		.hou{
			width: 200px;
			height: 200px;
			background: orange;
			transform: translateZ(-100px);
		}
	</style>
</head>
<body>
<div class="box">
	<div class="top">上</div>
	<div class="bottom">下</div>
	<div class="left">左</div>
	<div class="right">右</div>
	<div class="qian">前</div>
	<div class="hou">后</div>
</div>
</body>
</html>